import React from 'react';
import './index.less';
import api from '../../../axios'
import { Row, Table, Modal, Select, Space, Button } from 'antd';
import {
  ArrowUpOutlined,
  ArrowDownOutlined
} from '@ant-design/icons';

class index extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            data: [],
            data2: [],
            visible: false,
            loading: true,
            type: 1,
            pagination: {
              current: 1,
              size: 10,
            },
        };
    }

    handleChange = (value) => {
      this.setState({
        type: value,
        pagination: {
          current: 1,
          size: 10,
          total: 0
        },
      }, () => this.getData())
    };

    showModal = () => {
        this.setState({
            visible: true,
        });
    };
    
    hideModal = () => {
        this.setState({
            visible: false,
        });
    };

    getData = async () => {
      const { current, size } = this.state.pagination;
      this.setState({
        loading: true
      })
      let res = await api.get({
          method: 'get',
          url: '/data/lisByType',
          params: {
            page: current,
            type: this.state.type,
            size
          }
      });

      const pagination = { ...this.state.pagination };
      pagination.total = res.data.count;
      this.setState({
          data: res.data.list,
          loading: false,
          pagination
      })
      console.log(res.data.list);
    }

    async componentDidMount(){
      this.getData()
    }

    
    
    render() {
        const columns = [
            {
              title: '企业名称',
              dataIndex: 'company',
              key: 'company',
              render: (text, record) => (
                <span>
                  { record.company || '---' }
                </span>
              ),
            },
            {
              title: '汽油(吨)',
              dataIndex: 'gas',
              key: 'gas',
              render: (text, record) => (
                <span>
                   { record.gas || '---' }
                </span>
              ),
            },
            {
              title: '汽油同比',
              dataIndex: 'gas_tb',
              key: 'gas_tb',
              render: (text, record) => (
                <span>
                   { record.gas_tb && record.gas_tb + '%' || '---' }
                </span>
              ),
            },
            {
              title: '汽油涨/跌',
              dataIndex: 'gas_up_down',
              key: 'gas_up_down',
              render: (text, record) => (
                <span>
                   { !record.gas_up_down ? '---' : record.gas_up_down == 'up' ? <ArrowUpOutlined style={{ color: 'rgb(174, 50, 56)' }}/> : <ArrowDownOutlined style={{ color: 'rgb(65, 167, 108)' }}/> || '---' }
                </span>
              ),
            },
            {
              title: '汽油销售额(万)',
              dataIndex: 'gas_sales',
              key: 'gas_sales',
              render: (text, record) => (
                <span>
                  { record.gas_sales || '---' }
                </span>
              ),
            },
            {
              title: '柴油(吨)',
              dataIndex: 'diesel',
              key: 'diesel',
              render: (text, record) => (
                <span>
                  { record.diesel || '---' }
                </span>
              ),
            },
            {
              title: '柴油同比',
              dataIndex: 'c',
              key: 'diesel_tb',
              render: (text, record) => (
                <span>
                  { record.diesel_tb && record.diesel_tb  + '%' || '---' }
                </span>
              ),
            },
            {
              title: '柴油涨/跌',
              dataIndex: 'diesel_up_down',
              key: 'diesel_up_down',
              render: (text, record) => (
                <span>
                   { !record.diesel_up_down ? '---' : record.diesel_up_down == 'up' ? <ArrowUpOutlined style={{ color: 'rgb(174, 50, 56)' }}/> : <ArrowDownOutlined style={{ color: 'rgb(65, 167, 108)' }}/> || '---' }
                </span>
              ),
            },
            {
              title: '柴油销售额(万)',
              dataIndex: 'diesel_sales',
              key: 'diesel_sales',
              render: (text, record) => (
                <span>
                  { record.diesel_sales || '---' }
                </span>
              ),
            },
        ];    
   
    

        const onChange = (pagination, filters, sorter) => {
            console.log('params', pagination, filters, sorter);
            this.setState({
              pagination
            }, () => this.getData())
        }

        // rowSelection objects indicates the need for row selection
        const rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
              console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            },
            onSelect: (record, selected, selectedRows) => {
              console.log(record, selected, selectedRows);
            },
            onSelectAll: (selected, selectedRows, changeRows) => {
              console.log(selected, selectedRows, changeRows);
            },
        };


        return (
           <>
             <div className='header_title'>
                <Space wrap>
                    <Select
                      defaultValue="进购"
                      style={{ width: 220 }}
                      onChange={this.handleChange}
                      loading={this.state.loading}
                      options={[
                        { value: '1', label: '进购' },
                        { value: '2', label: '零售' },
                        { value: '3', label: '批发' },
                        { value: '4', label: '库存' },
                      ]}
                    />
                </Space>
                <Button type="primary">选择类型</Button>
             </div>
             <Table
                columns={columns}
                dataSource={this.state.data}
                rowSelection={rowSelection}
                pagination={this.state.pagination}
                onChange={onChange}
                loading={this.state.loading}
              />
           </>
        );
    }
}

export default index;